<template>
	<view>
		<view class="tabs">
			<view class="item" :class="{'on':current == 0}" @click="clickTabs(0)">
				<text class="u-p-r-10">{{tabsLabel}}</text><u-icon name="arrow-down" size="24"></u-icon>
			</view>
			<view class="item" :class="{'on':current == 1}" @click="clickTabs(1)">
				<text class="u-p-r-10">{{calendarLabel}}</text>
				<u-icon name="arrow-down" size="24"></u-icon>
			</view>
		</view>
		<view class="tabs-item">
			<view v-if="constitute.list.length > 0">
				<view class="u-flex u-p-30">
					<view class="u-flex-1"><text>共计收入<text class="bold color-warning u-font-28">{{constitute.ordercount}}</text>笔</text></view>
					<view><text>合计<text class="color-warning u-font-20">¥</text><text class="bold color-warning u-font-28">{{constitute.balance}}</text></text></view>
				</view>
				<u-cell-group>
					<u-cell-item :arrow="false"  v-for="(item,index) in constitute.list" :key="index">
						<view slot="title">
							<view><text class="u-font-32">{{item.productname}}</text></view>
							<view><text class="u-font-24 u-tips-color">{{item.createddatetime}}</text></view>
						</view>
						<view class="u-main-color u-font-32 color-success">{{item.amount}}</view>
						<view class="u-main-color u-font-32 color-warning ">{{item.weight}}</view>
					</u-cell-item>
				</u-cell-group>
			</view>
			<view v-else class="nomore u-p-t-80">
				<u-empty text="您还没有相关的收入构成记录" mode="list"></u-empty>
			</view>
		</view>
		<u-select v-model="showSelect" :list="selectList" @confirm="confirmSelect"></u-select>
		<u-calendar v-model="showCalendar" mode="range" active-bg-color="rgb(16,190,202)"
			range-bg-color="rgba(16,190,202,0.13)" range-color="rgb(16,190,202)" @change="calendarDate"></u-calendar>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				departmentid:0,
				constitute: {
					list: []
				},
				showSelect: false,
				showCalendar: false,
				current: 0,
				dateType: 1,
				startDate: '',
				endDate: '',
				tabsLabel: '本月',
				calendarLabel: '自定义时间',
				selectList: [{
						label: '本月',
						value: 1,
					},
					{
						label: '本季度',
						value: 2,
					},
					{
						label: '本年',
						value: 3,
					}
				],
			}
		},
		onLoad(opt) {
			this.departmentid = opt.departmentid
			this.getDepartmentIncome()
		},
		methods: {
			getDepartmentIncome(){
				this.$u.post('User/BillDetails/GetDepartmentIncome',{
					departmentid: this.departmentid,
					timeType: this.dateType,
					startDate: this.startDate,
					endDate: this.endDate
				}).then((res)=>{
					this.constitute = res
				})
			},
			clickTabs(index) {
				if (index == 0) {
					this.showSelect = true
				} else {
					this.showCalendar = true
				}
			},
			confirmSelect(e) {
				console.log(e)
				this.dateType = e[0].value
				this.tabsLabel = e[0].label
				this.current = 0;
				this.calendarLabel = '自定义时间'
				this.getDepartmentIncome()
			},
			calendarDate(e) {
				console.log(e)
				this.current = 1
				this.dateType = 4
				this.startDate = e.startDate
				this.endDate = e.endDate
				this.calendarLabel = e.startDate + '至' + e.endDate
				this.getDepartmentIncome()
			}
		}
	}
</script>

<style lang="scss" scoped>
	.tabs {
		display: flex;
		align-items: center;
		background-color: #fff;
		height: 60rpx;
	
		.item {
			flex: 1;
			text-align: center;
			font-size: 24rpx;
	
			&.on {
				color: $u-color-main;
			}
		}
	}
	.bold{
		font-weight: bold;
	}
	.nomore {
		display: flex;
		align-items: center;
		justify-content: center;
		flex: 1;
	}
	
	.call {
		color: $u-color-main;
	}
</style>
